
div.contextmenu {
  position: absolute;
  top: 0;
  min-width: 240px;
  background: $contentBackground;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  transform: translate3d(0, -20px, 0);
  transition: opacity 0.3s, transform 0.3s;
  z-index: 4;
  @extend %hidden;

  &[data-type='list'], &[data-type='separator'] {
    left: -99999px;
    margin: 0 0 0 10px;
    min-width: 270px;
  }

  &[data-type='menu'] {
    right: -93px;
    margin-top: -2px;
  }

  &[data-type='sort'] {
    right: -57px;
    margin-top: -2px;
  }

  &.visible {
    transform: translate3d(0, 0, 0);
    @extend %visible;

    &.top {
      transform: translate3d(0, -40px, 0);
    }
  }

  > ul.icons {
    background: darken($contentBackground2, 0.5%);
    padding: 3px 2px 5px 2px;

    > li {
      position: relative;
      display: inline-block;

      &.right {
        float: right;
      }

      > a {
        @include mask(null, $contextMenuIconColor, 20px);
        position: relative;
        display: block;
        width: 32px;
        height: 32px;
        cursor: pointer;
        border-radius: 50%;
        margin: 0 3px;
        transition: background-color 0.3s;

        &.hover {
          background-color: darken($contentBackground2, 3%);
        }

        &[data-name='delete']::before {
          @include maskImage('icon-delete');
          -webkit-mask-size: 19px;
        }

        &[data-name='edit']::before {
          @include maskImage('icon-edit');
        }

        &[data-name='infos']::before {
          @include maskImage('icon-info');
        }

        &[data-name='add']::before {
          @include maskImage('icon-add');
        }

        &[data-name='copyToClipboard']::before {
          @include maskImage('icon-copy');
          -webkit-mask-size: 18px;
        }

        &[data-name='pin']::before {
          @include maskImage('icon-pin');
          -webkit-mask-size: 15px;
        }

        &[data-name='unpin']::before {
          @include maskImage('icon-unpin');
          -webkit-mask-size: 14px;
        }

        &[data-name='showHidden']::before {
          @include maskImage('icon-show');
        }

        &[data-name='hide']::before {
          @include maskImage('icon-hide');
        }

        &[data-name='settings']::before {
          @include maskImage('icon-settings');
        }

        &[data-name='bookmarkManager']::before {
          @include maskImage('icon-star');
        }

        &[data-name='keyboardShortcuts']::before {
          @include maskImage('icon-keyboard');
          -webkit-mask-size: 22px;
        }
      }

      > ul {
        position: absolute;
        bottom: -30px;
        left: 0;
        transform: translate3d(calc(-50% + 19px), -7px, 0);
        text-align: center;
        white-space: nowrap;
        background: $contentBackground;
        border-radius: 20px;
        padding: 2px 7px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        transition: opacity 0.3s, transform 0.3s;
        @extend %hidden;

        &.visible {
          @extend %visible;
          transform: translate3d(calc(-50% + 19px), 0, 0);
        }

        &::before {
          content: "";
          position: absolute;
          top: -14px;
          left: 0;
          right: 0;
          width: 0;
          height: 0;
          margin: auto;
          border: 7px solid transparent;
          border-bottom-color: $contentBackground;
          pointer-events: none;
        }

        > li {
          display: inline-block;

          > a {
            @include mask(none, $contextMenuIconColor, 18px);
            position: relative;
            display: block;
            width: 24px;
            height: 24px;
            cursor: pointer;
            border-radius: 50%;
            margin: 0 1px;
            transition: background-color 0.3s;

            &[data-type='bookmark']::before {
              @include maskImage('icon-bookmark');
            }

            &[data-type='dir']::before {
              @include maskImage('icon-dir-1');
            }

            &[data-type='separator']::before {
              @include maskImage('icon-separator');
            }
          }
        }
      }
    }
  }

  > ul.list {

    > li {
      position: relative;

      > div.checkbox {
        position: absolute;
        z-index: 2;
        top: 9px;
        left: 9px;

        + a {
          padding-left: 38px;

          &::before {
            display: none;
          }
        }

        &.hover + a {
          color: $__colorScheme;
        }
      }

      > a {
        @include mask(null, $contextMenuIconColor, 20px);
        position: relative;
        display: block;
        line-height: 39px;
        padding: 0 10px 0 38px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: pointer;
        transition: color 0.3s;

        > span {
          display: inline-block;
          margin: 0 0 0 3px;
          font-size: 80%;
          opacity: 0.8;
        }

        &::before {
          transition: background-color 0.3s, opacity 0.3s;
          width: 39px;
          height: 39px;
        }

        &.hover {
          color: $__colorScheme;

          &::before {
            background-color: $__colorScheme;
            opacity: 0.8;
          }
        }

        &[data-name='add']::before {
          @include maskImage('icon-add');
          -webkit-mask-size: 22px;
        }

        &[data-name='reload']::before {
          @include maskImage('icon-update');
        }

        &[data-name='closeAll']::before {
          @include maskImage('icon-close');
        }

        &[data-name='newTab']::before, &[data-name='openChildren']::before {
          @include maskImage('icon-newTab');
        }

        &[data-name='select']::before, &[data-name='deselect']::before {
          @include maskImage('icon-select');
          -webkit-mask-size: 24px;
        }

        &[data-name='currentTab']::before {
          @include maskImage('icon-currentTab');
        }

        &[data-name='newWindow']::before {
          @include maskImage('icon-newWindow');
        }

        &[data-name='newIncognito']::before {
          @include maskImage('icon-incognito');
        }

        &[data-name='delete']::before {
          @include maskImage('icon-delete');
        }

        &[data-name='edit']::before {
          @include maskImage('icon-edit');
        }

        &[data-name='checkBookmarks']::before {
          @include maskImage('icon-update');
        }

        &[data-name='showInDir']::before {
          @include maskImage('icon-showInDir');
        }
      }
    }
  }
}

section#sidebar {

  &[data-pos='right'] {

    div.contextmenu[data-type='menu'], div.contextmenu[data-type='sort'] {
      right: 0;
    }
  }
}

@import "../rtl/include/contextmenu";
@import "../highContrast/include/contextmenu";
@import "../dark/include/contextmenu";